<!--常用联系人-->
<template>
    <div class="recent-contact-style">
        <a-collapse :default-active-key="[1,2]" :bordered="false">
            <a-collapse-panel key="1" :header="this.$i18n('common.my.peoplerelate')" :style="customStyle">
                <ul>
                    <li class="item-li" v-for="(item,index) in relativeMemberList" :key="index" @click="onSelect(item)">
                        {{ item.v }}
                    </li>
                </ul>
            </a-collapse-panel>
            <a-collapse-panel key="2" :header="this.$i18n('collaboration.newcoll.recent.peoples')" :style="customStyle">
                <ul>
                    <li class="item-li" v-for="(item,index) in tokenInputSelectList" :key="index"
                        @click="onSelect(item)">
                        {{ item.v }}
                    </li>
                </ul>
            </a-collapse-panel>
        </a-collapse>
    </div>
</template>

<script>
import api from "@/api";
import emitter from "@/plugins/global-callback";

export default {
  name: "RecentContact",
  data() {
    return {
      customStyle:
        'background: transparent;border-radius: 4px;border: 0;overflow: hidden',
      //最近联系人
      tokenInputSelectList: [],
      //关联人员
      relativeMemberList: [],
    };
  },
  methods: {
    onSelect: (item) => {
      emitter.publish('takenInputPeople', [item]);
    },
  },
  created() {
    this.api = api;
  },
  mounted() {
    this.api.tokenInput()
      .then(res => {
          console.log(res);
        if (!res || typeof res !== 'object') {
          return;
        }
        this.tokenInputSelectList.push(...res);
      })
    this.api.relativeMemberList()
      .then(res => {
        if (!res || typeof res !== 'string') {
          return;
        }
        let parse = JSON.parse(res);
        this.relativeMemberList.push(...parse)
          console.log(this.relativeMemberList);
      })
  },
}
</script>

<style lang="scss">
.recent-contact-style {
  overflow-y: scroll;

  .item-li {
    padding: 6px 25px;

    &:hover {
      background-color: #e6f6ff;
      cursor: pointer;
    }
  }

  .ant-collapse > .ant-collapse-item > .ant-collapse-header {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

</style>